<template>
  <el-container style="padding:20px 0px 0px 20px; position:absolute; left:0; top:0; width:100%;height:100%;">

    <el-header>
      <el-form :inline="true">

        <el-form-item label="激活编辑" prop="editStatus">
          <el-switch v-model="editStatus"></el-switch>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="submitUpdation()">提交修改</el-button>
        </el-form-item>

        <el-form-item style="float: right">
          <el-button type="infl" @click="returnAllSpecies()">返回</el-button>
        </el-form-item>

      </el-form>
    </el-header>
    <el-main>
      <el-scrollbar>

        <el-col :span="24" class="toolbar">
          <el-form :model="speciesDetail" :rules="rules" ref="ruleForm" label-width="100px">

            <el-form-item label="1-品种ID" prop="speciesId">
              <el-input v-model="speciesDetail.speciesId" disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="2-父本ID" prop="maleParentId">
              <el-input v-model="speciesDetail.maleParentId" :disabled="!editStatus"></el-input>
            </el-form-item>
            <el-form-item label="3-母本ID" prop="femaleParentId">
              <el-input v-model="speciesDetail.femaleParentID" :disabled="!editStatus"></el-input>
            </el-form-item>
            <el-form-item label="4-项目ID" prop="projectId">
              <el-input v-model="speciesDetail.projectId" :disabled="!editStatus"></el-input>
            </el-form-item>
            <el-form-item label="5-试验类型" prop="experimentType">
              <el-input v-model="speciesDetail.experimentType" :disabled="!editStatus"></el-input>
            </el-form-item>

            <el-form-item label="6-叶颜色">
              <el-radio-group v-model="speciesDetail.leafColour" size="small" :disabled="!editStatus">
                <el-radio-button label="浅绿"></el-radio-button>
                <el-radio-button label="绿"></el-radio-button>
                <el-radio-button label="深绿"></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <div class="clear"></div>

            <el-form-item label="7-花冠色">
            <el-radio-group v-model="speciesDetail.corollaColour" size="small" :disabled="!editStatus">
            <el-radio-button label="白"></el-radio-button>
            <el-radio-button label="浅红"></el-radio-button>
            <el-radio-button label="红"></el-radio-button>
            <el-radio-button label="红紫"></el-radio-button>
            <el-radio-button label="紫"></el-radio-button>
            <el-radio-button label="蓝紫"></el-radio-button>
            <el-radio-button label="蓝"></el-radio-button>
            <el-radio-button label="黄"></el-radio-button>
            </el-radio-group>
            </el-form-item>

            <div class="clear"></div>

            <el-form-item label="8-花繁茂性">
            <el-radio-group v-model="speciesDetail.flowering" size="small" :disabled="!editStatus">
            <el-radio-button label="无"></el-radio-button>
            <el-radio-button label="少"></el-radio-button>
            <el-radio-button label="中"></el-radio-button>
            <el-radio-button label="多"></el-radio-button>
            </el-radio-group>
            </el-form-item>

            <div class="clear"></div>

            <el-form-item label="9-茎色">
            <el-radio-group v-model="speciesDetail.stemColour" size="small" :disabled="!editStatus">
            <el-radio-button label="绿"></el-radio-button>
            <el-radio-button label="褐"></el-radio-button>
            <el-radio-button label="紫"></el-radio-button>
            <el-radio-button label="深紫"></el-radio-button>
            <el-radio-button label="局部有紫色"></el-radio-button>
            </el-radio-group>
            </el-form-item>

            <div class="clear"></div>

            <el-form-item label="10-天然结实性">
            <el-radio-group v-model="speciesDetail.openpollinated" size="small" :disabled="!editStatus">
            <el-radio-button label="无"></el-radio-button>
            <el-radio-button label="弱"></el-radio-button>
            <el-radio-button label="中"></el-radio-button>
            <el-radio-button label="强"></el-radio-button>
            <el-radio-button label="极强"></el-radio-button>
            </el-radio-group>
            </el-form-item>
            <div class="clear"></div>

            <el-form-item label="11-整齐度">
            <el-radio-group v-model="speciesDetail.uniformityOfTuberSize" size="small" :disabled="!editStatus">
            <el-radio-button label="整齐"></el-radio-button>
            <el-radio-button label="中"></el-radio-button>
            <el-radio-button label="不整齐"></el-radio-button>
            </el-radio-group>
            </el-form-item>
            <div class="clear"></div>

            <el-form-item label="12-薯形" prop="longitude" :disabled="!editStatus">
            <el-select v-model="speciesDetail.tuberShape" clearable placeholder="请选择">
            <el-option
            v-for="item in tuberShaps"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
            </el-select>
            </el-form-item>
            <div class="clear"></div>

            <el-form-item label="13-薯皮类型">
            <el-radio-group v-model="speciesDetail.skinSmotthness" size="small" :disabled="!editStatus">
            <el-radio-button label="光滑"></el-radio-button>
            <el-radio-button label="中"></el-radio-button>
            <el-radio-button label="粗糙"></el-radio-button>
            </el-radio-group>
            </el-form-item>

            <div class="clear"></div>

            <el-form-item label="14-芽眼深浅">
            <el-radio-group v-model="speciesDetail.eyeDepth" size="small" :disabled="!editStatus">
            <el-radio-button label="浅"></el-radio-button>
            <el-radio-button label="中"></el-radio-button>
            <el-radio-button label="深"></el-radio-button>
            </el-radio-group>
            </el-form-item>
            <div class="clear"></div>

            <el-form-item label="15-皮色" prop="longitude" :disabled="!editStatus">
            <el-select v-model="speciesDetail.skinColour" clearable placeholder="请选择">
            <el-option
            v-for="item in skinColours"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
            </el-select>
            </el-form-item>

            <el-form-item label="16-肉色" prop="longitude" :disabled="!editStatus">
            <el-select v-model="speciesDetail.fleshColour" clearable placeholder="请选择">
            <el-option
            v-for="item in fleshColours"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
            </el-select>
            </el-form-item>

            <div class="clear"></div>
            <el-form-item label="17-是否入选">
            <el-switch
            v-model="speciesDetail.isChoozen"
            active-text="是"
            inactive-text="否"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :disabled="!editStatus">
            </el-switch>
            </el-form-item>

            <div class="clear"></div>

            <el-carousel :interval="4000" type="card" height="400px" style="max-width: 1000px; margin: auto">
              <el-carousel-item v-for="item in speciesImgs" :key="item">
                <div>
                <img :src="item" style="min-width:100%; min-height:100% ; width:100%; height:100%"/>
                </div>
              </el-carousel-item>
            </el-carousel>

            <el-upload
              class="upload-demo"
              action="http://10.103.241.48:9526/species/updateSpeciesPic1"
              :data="curSpecies"
              name="file"
              :on-success="handlePic1UploadSuccess"
              >
              <el-button size="small" type="primary">点击上传图片-1</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>

            <el-upload
              class="upload-demo"
              :action="updatePic2API"
              :data="curSpecies"
              name="file"
              :on-success="handlePic2UploadSuccess"
            >
              <el-button size="small" type="primary">点击上传图片-2</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <el-upload
              class="upload-demo"
              :action="updatePic3API"
              :data="curSpecies"
              name="file"
              :on-success="handlePic3UploadSuccess"
            >
              <el-button size="small" type="primary">点击上传图片-3</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>


          </el-form>
        </el-col>

      </el-scrollbar>
    </el-main>


  </el-container>
</template>

<script>
  import {getSpeciesDetail, updateSpeciesDetail} from '@/api/SpeciesManage'

  import {getLocalSpecies, updateLocalSpecies, updateSpeciesPic} from '../../api/SpeciesManage'

  export default {
    data() {
      return {

        speciesImgs: {
          img1: '',
          img2: '',
          img3: '',
          img4: '',
          img5: ''
        },
        //species简表;
        curSpecies: {
          speciesId: this.GLOBAL.species.speciesId,
          img1: '',
          img2: '',
          img3: '',
          img4: '',
          img5: ''
        },
        winHeight: window.innerHeught - 50,
        // speciesDetail: {},
        speciesDetail: {
          speciesId: '',
          maleParentId: '',
          femaleParentID: '',
          projectId: '',
          experimentType: '',
          leafColour: '',
          corollaColour: '',
          flowering: '',
          stemColour: '',
          openpollinated: '',
          uniformityOfTuberSize: '',
          tuberShape: '',
          skinSmotthness: '',
          eyeDepth: '',
          skinColour: '',
          fleshColour: '',
          isChoozen: '',
          img1: '',
          img2: '',
          img3: '',
          img4: '',
          img5: ''
        },
        tuberShaps: [
          { value: '扁圆', label: '扁圆' },
          { value: '圆形', label: '圆形' },
          { value: '卵形', label: '卵形' },
          { value: '倒卵', label: '倒卵' },
          { value: '扁椭圆', label: '扁椭圆' },
          { value: '椭圆', label: '椭圆' },
          { value: '长方', label: '长方' },
          { value: '长筒', label: '长筒' },
          { value: '棍棒', label: '棍棒' },
          { value: '楔形', label: '楔形' },
          { value: '肾形', label: '肾形' },
          { value: '纺锤', label: '纺锤' },
          { value: '镰刀', label: '镰刀' },
          { value: '卷曲', label: '卷曲' },
          { value: '掌状', label: '掌状' },
          { value: '手风琴', label: '手风琴' },
          { value: '结节', label: '结节' }
        ],
        skinColours: [
          { value: '乳白', label: '乳白' },
          { value: '浅黄', label: '浅黄' },
          { value: '黄', label: '黄' },
          { value: '褐', label: '褐' },
          { value: '浅红', label: '浅红' },
          { value: '红', label: '红' },
          { value: '深红', label: '深红' },
          { value: '紫', label: '紫' },
          { value: '深紫', label: '深紫' },
          { value: '锈色', label: '锈色' },
          { value: '红杂色', label: '红杂色' },
          { value: '蓝紫杂色', label: '蓝紫杂色' }
        ],
        fleshColours: [
          { value: '白', label: '白' },
          { value: '乳白', label: '乳白' },
          { value: '浅黄', label: '浅黄' },
          { value: '黄', label: '黄' },
          { value: '深黄', label: '深黄' },
          { value: '橙', label: '橙' },
          { value: '红', label: '红' },
          { value: '浅紫', label: '浅紫' },
          { value: '紫', label: '紫' },
          { value: '蓝紫', label: '蓝紫' },
          { value: '红纹或紫纹', label: '红纹或紫纹' }
        ],
        editStatus: false,
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          region: [
            {required: true, message: '请选择活动区域', trigger: 'change'}
          ],
          date1: [
            {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
          ],
          date2: [
            {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
          ],
          type: [
            {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
          ],
          resource: [
            {required: true, message: '请选择活动资源', trigger: 'change'}
          ],
          desc: [
            {required: true, message: '请填写活动形式', trigger: 'blur'}
          ]
        }
      }
    },

    created() {
      // 刚打开页面时就去取数据；
      this.updatePic1API = this.GLOBAL.serverPath + '/species/updateSpeciesPic1'
      this.updatePic2API = this.GLOBAL.serverPath + '/species/updateSpeciesPic2'
      this.updatePic3API = this.GLOBAL.serverPath + '/species/updateSpeciesPic3'
      this.curSpecies = this.GLOBAL.species//空降过来的，故global中无species详细数据；
      // this.speciesImgs.img1 = this.GLOBAL.nginxPath + this.curSpecies.img1
      // this.speciesImgs.img2 = this.GLOBAL.nginxPath + this.curSpecies.img2
      // this.speciesImgs.img3 = this.GLOBAL.nginxPath + this.curSpecies.img3

      this.fetchData()
      console.log('图片：' + this.speciesDetail.img1)
      //this.speciesImgs.img1 = this.GLOBAL.nginxPath + this.speciesDetail.img1
      //this.speciesImgs.img1 = '/Users/zhangzt/Documents/11111.png'

      // this.speciesImgs.img2 = this.GLOBAL.nginxPath + this.speciesDetail.img2
      // this.speciesImgs.img3 = this.GLOBAL.nginxPath + this.speciesDetail.img3
      // this.speciesImgs.img4 = this.GLOBAL.nginxPath + this.speciesDetail.img4
      // this.speciesImgs.img5 = this.GLOBAL.nginxPath + this.speciesDetail.img5
    },

    methods: {
      handlePic1UploadSuccess(res, file) {
        console.log(res)
        console.log(file)
        this.curSpecies.img1 = res.msg
        this.speciesImgs.img1 = this.GLOBAL.nginxPath + this.curSpecies.img1
        console.log(this.curSpecies.img1)
      },
      handlePic2UploadSuccess(res, file) {
        console.log(res)
        console.log(file)
        this.curSpecies.img2 = res.msg
        this.speciesImgs.img2 = this.GLOBAL.nginxPath + this.curSpecies.img2
        console.log(this.curSpecies.img2)
      },
      handlePic3UploadSuccess(res, file) {
        console.log(res)
        console.log(file)
        this.curSpecies.img3 = res.msg
        this.speciesImgs.img3 = this.GLOBAL.nginxPath + this.curSpecies.img3
        console.log(this.curSpecies.img3)
      },
      fetchData() {
        if (this.GLOBAL.species.speciesId !== '') {
          this.listLoading = true
          getLocalSpecies({ 'speciesId': this.GLOBAL.species.speciesId }).then(response => {
            console.log(response)
            this.speciesDetail = response.data.rows[0]
            this.speciesDetail.speciesId = response.data.rows[0].speciesId
            this.speciesImgs.img1 = response.data.rows[0].img1;
            console.log(this.speciesDetail.speciesId)
            console.log("photo  " + this.speciesDetail.img1)

          })
        }
      },
      submitUpdation() {
        updateLocalSpecies(this.speciesDetail).then(response => {
          if (response.data.success === true) {
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 5000
            })
          } else {
            this.$notify({
              title: '失败',
              message: response.data.msg,
              type: 'failure',
              duration: 5000
            })
          }
        })
      },
      returnAllSpecies() {
        this.$router.push('/speciesmodule/localSpecies')
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$notify({
              title: '成功',
              message: '提交成功',
              type: 'success',
              duration: 2000
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .clear {
    clear: both;
  }

  .el-form-item {
    max-width: 300px;
    float: left;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>


